<script>
import { cloud } from '@/framework/utils/request'
import { applyRefund, getOrderDetails } from '@/api/mallApi/refund'

export default {
  name: 'RefundPage',
  data() {
    return {
      amount: 0,
      orderCode: '',
      uploadFileUrl: `${
        process.env.VUE_APP_BASE_API + cloud.file
      }/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      form: {
        orderCode: '',
        type: 1,
        reason: '',
        rejectAmount: 0,
        remark: '',
        img: ''
      },
      active: 0,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      value: 0,
      fileList: [],
      rules: {
        type: [
          { required: true, message: '请选择退款类型', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请选择退款原因', trigger: 'change' }
        ],
        rejectAmount: [
          { required: true, message: '请输入退款金额', trigger: 'blur' }
        ],
        description: [{ message: '请输入退款说明', trigger: 'blur' }]
      },
      orderDetail: {},
      mallName: '',
      paidAmount: 0
    }
  },
  created() {
    // 获取路由传参
    this.orderCode = this.$route.query.orderCode
    this.form.orderCode = this.orderCode
    if (this.$route.query.status) {
      this.active = parseInt(this.$route.query.status)
    }
    this.getOrder()
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length} 张图片`
      )
    },
    handleRemove(file, fileList) {},
    handleAvatarSuccess(res, file) {
      this.form.img = res.data.fileUrl
    },
    handleSubmit() {
      this.form.rejectAmount = this.form.rejectAmount * 100
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('this.form: ', this.form)
          applyRefund(this.form)
            .then((res) => {
              if (res.code === '00000') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.disabled = true
                this.active += 1
                this.$router.push({
                  path: '/mall/profile/refund'
                })
              }
            })
            .catch((err) => {
              console.log('err: ', err)
            })
        }
      })
    },
    getOrder() {
      if (this.active > 0) {
        this.disabled = true
        this.form.reason = this.$route.query.reason
        this.form.type = this.$route.query.type
        this.form.remark = this.$route.query.remark
        this.form.type = parseInt(this.$route.query.type)
        this.fileList = [{ name: '图片', url: this.$route.query.img }]
      }
      getOrderDetails({ orderCode: this.orderCode }).then((res) => {
        if (res.code === '00000') {
          this.orderDetail = res.data.orderDetailesList
          this.mallName = res.data.mallName
          this.form.rejectAmount = (res.data.paidAmount / 100).toFixed(2)
          this.paidAmount = res.data.paidAmount
        }
      })
    },
    back() {
      // 返回上一级
      this.$router.go(-1)
    }
  }
}
</script>

<template>
  <div class="refund">
    <p class="title">退货/退款</p>
    <div class="step">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="买家申请退款"></el-step>
        <el-step title="卖家处理退货申请"></el-step>
        <el-step title="买家退货"></el-step>
        <el-step title="退款完毕"></el-step>
      </el-steps>
    </div>
    <div class="card">
      <div class="form">
        <el-form
          class="elForm"
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="退款商品">
            <div class="detail1">
              <div
                class="item1"
                style="margin-top: 10px"
                v-for="item in orderDetail"
                :key="item.id"
              >
                <img :src="item.goodsThumbnail" alt="" />
                <div>
                  <div style="width: 368px">
                    {{ item.goodsName }}
                  </div>
                  <div
                    style="color: #ff720e; font-weight: 800; font-size: 18px"
                  >
                    ￥{{ (item.price / 100).toFixed(2) }}/套 * {{ item.amount }}
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="退款类型" prop="type">
            <el-radio :disabled="disabled" v-model="form.type" :label="1"
            >退货退款
            </el-radio>
            <el-radio :disabled="disabled" v-model="form.type" :label="2"
            >仅退款
            </el-radio>
          </el-form-item>
          <el-form-item label="退款原因" prop="reason">
            <el-select
              style="width: 380px"
              v-model="form.reason"
              :disabled="disabled"
              placeholder="请选择退款原因"
              clearable
            >
              <el-option label="不想要了" value="不想要了"></el-option>
              <el-option label="卖家发错货" value="卖家发错货"></el-option>
              <el-option
                label="商品质量有问题"
                value="商品质量有问题"
              ></el-option>
              <el-option label="商品描述不符" value="商品描述不符"></el-option>
              <el-option
                label="收到商品少件/破损"
                value="收到商品少件/破损"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款金额" prop="rejectAmount">
            <el-input
              style="width: 380px"
              v-model="form.rejectAmount"
              disabled
              placeholder="请输入退款金额"
            ></el-input>
          </el-form-item>
          <p>最多¥{{ form.rejectAmount }}，含发货运费¥0.00，其中包含部分红包</p>
          <el-form-item label="退款说明" prop="description">
            <el-input
              style="width: 380px"
              v-model="form.remark"
              :disabled="disabled"
              placeholder="请输入退款说明"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
              class="upload-demo"
              :action="uploadFileUrl"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :file-list="fileList"
              list-type="picture-card"
              :disabled="disabled"
              :limit="1"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-show="!disabled" @click="handleSubmit"
            >提交
            </el-button>
            <el-button type="primary" @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="detail">
        <p>订单详情</p>
        <div class="item" v-for="item in orderDetail" :key="item.id">
          <img :src="item.goodsThumbnail" alt="" />
          <div>
            <div>{{ item.goodsName }}</div>
            <div
              style="
                color: #ff720e;
                font-weight: 800;
                font-size: 18px;
                margin-top: 16px;
              "
            >
              ￥{{ (item.price / 100).toFixed(2) }}/套 * {{ item.amount }}
            </div>
          </div>
        </div>
        <div class="content">
          <div>
            <span>卖家：</span>
            <span style="font-weight: 400; font-size: 14px; color: #1289ff">{{
              mallName
            }}</span>
          </div>
          <div>
            <span>订单编号：</span>
            <span style="font-weight: 400; font-size: 12px">{{
              orderCode
            }}</span>
          </div>
          <div>
            <span>商品总价：</span>
            <span style="font-weight: 400; font-size: 14px; margin-left: 5px"
            >¥{{ (paidAmount / 100).toFixed(2) }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.refund {
  // 水平居中
  margin: 0 auto;
  width: 1240px;
  border-radius: 4px;
  padding: 20px;

  .title {
    font-size: 20px;
    color: #3c3c3c;
    font-weight: 700;
  }

  .card {
    margin-top: 18px;
    width: 1202px;
    border-radius: 4px;
    //padding: 18px;
    border: 1px solid #d8d8d8;
    display: flex;

    .form {
      width: 900px;

      height: 796px;
      margin-left: 10px;

      .detail1 {
        .item1 {
          display: flex;

          img {
            width: 77px;
            height: 77px;
          }

          div {
            font-weight: 400;
            font-size: 16px;
            margin-left: 10px;
            color: #000;
          }
        }
      }

      .item1 {
        display: flex;

        img {
          width: 77px;
          height: 77px;
        }

        div {
          font-weight: 400;
          font-size: 16px;
          margin-left: 10px;
          color: #000;
        }
      }

      p {
        color: #d8d8d8;
        margin-left: 80px;
        font-size: 14px;
        margin-top: -10px;
      }
    }

    .detail {
      padding: 18px;
      width: 325px;
      border-left: 1px solid #d8d8d8;

      p {
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: #3c3c3c;
        margin-top: -5px;
        border-bottom: 1px solid #d8d8d8;
      }

      .item {
        display: flex;
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 10px;
        margin-bottom: 10px;

        img {
          width: 77px;
          height: 77px;
        }

        div {
          font-weight: 400;
          font-size: 16px;
          margin-left: 10px;
          color: #000;
        }
      }

      .content {
        div {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
